<template>
  <div class="page">
    <tableHeader v-model="state.currentItem" />
    <div class="pageContentStyle">
      <PageContent v-model="state.currentItem" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { provide, reactive, onMounted, ref, onBeforeUnmount } from "vue";
import tableHeader from "./tableHeader.vue";
import { useRouter, useRoute } from "vue-router";
import { useIntervalFn } from "@vueuse/core";
import { useElectricData } from "@/store/backend/DataM/RealTime";
import { useAssetCabinet } from "@/store/backend/Assets/cabinet";
import { DictOperation } from "@/utils/common"; // 导入表格api方法生成器
import { useWarningItemObject } from "@/store/backend/Warning/itemObject";
import PageContent from "./page.vue";

const router = useRouter();
const route = useRoute();
const realTime = useElectricData();
const cabinet = useAssetCabinet();
const itemObject = useWarningItemObject();

const state: {
  cabinetId: any;
  currentItem: any;
  time: string;
} = reactive({
  cabinetId: route.query.cabinetId ? route.query.cabinetId : null,
  currentItem: {},
  time: "",
});

//初始化字典处理类
const dictOperation = new DictOperation();

//获取实时数据
const getRealTime = (id: any) => {
  realTime.getLastFilter({ cabinetId: id }).then((res: any) => {
    state.currentItem = res.rows[0];
  });
};

//每分钟更新一次
const { pause, resume, isActive } = useIntervalFn(
  () => {
    getRealTime(state.cabinetId); //获取实时数据
  },
  30000, //30s
  {
    immediate: false,
    immediateCallback: false,
  }
);

onMounted(() => {
  getRealTime(state.cabinetId); //获取实时数据
  resume(); //轮询开始
});

provide("cabinet", cabinet);
provide("realTime", realTime);
provide("itemObject", itemObject);

onBeforeUnmount(() => {
  pause(); //暂停
});
</script>
<style lang="scss" scoped>
@mixin flex($direction, $content, $align) {
  display: flex;
  flex-direction: $direction;
  justify-content: $content;
  align-items: $align;
}
.page {
  .pageContentStyle {
    padding: 1rem;
  }
}
</style>
